<template>
    <div>
        <div class="rubbishChartBox" id="rubbishChart1"></div>
        <div class="chart-line-box">
            <div class="line"></div>
            <div class="line"></div>
        </div>
        <div class="rubbishChartBox" id="rubbishChart2"></div>
    </div>
</template>

<script>
export default {
    mounted() {
        const self = this
        // 垃圾统计
        const rubbishChartBox1 = self.$echarts.init(document.getElementById('rubbishChart1'))
        const rubbishChartBox2 = self.$echarts.init(document.getElementById('rubbishChart2'))
        const legend1 = ['不可回收垃圾', '可回收垃圾']
        const xData = ['金东区', '婺城区']
        const UnRecyclableData = [39, 20]
        const RecyclableData = [40, 23]
        const timeLineData = [1]
        const legend2 = ['有害垃圾', '其他垃圾']
        const HarmfulData = [39, 20]
        const OtherData = [40, 23]
        // const textColor = '#fff'
        const lineColor = '#3c94ee'
        const colors = [
            {
                start: 'rgba(60,148,238, 1)', // 60,148,238
                end: 'rgba(32,54,183,1)' // #2036b7
            },
            {
                start: 'rgba(5,102,92,1)',
                end: 'rgba(26,211,171,1)'
            }
        ]
        const colors1 = [
            {
                start: 'rgba(202,167,181, 1)', // 60,148,238
                end: 'rgba(191,93,93,1)' // #2036b7
            },
            {
                start: 'rgba(159,80,58,1)',
                end: 'rgba(230,162,54,1)'
            }
        ]
        const rubbishOption = {
            baseOption: {
                timeline: {
                    show: false,
                    top: 0,
                    data: []
                },
                legend: {
                    top: '20%',
                    left: 'center',
                    itemWidth: 0,
                    itemHeight: 5,
                    itemGap: 60,
                    icon: 'horizontal',
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 18
                    },
                    data: []
                },
                grid: [
                    {
                        show: false,
                        left: '5%',
                        top: '40%',
                        bottom: '8%',
                        containLabel: true,
                        width: '36%'
                    },
                    {
                        show: false,
                        left: '50%',
                        top: '40%',
                        bottom: '8%',
                        width: '20%'
                    },
                    {
                        show: false,
                        right: '5%',
                        top: '40%',
                        bottom: '8%',
                        containLabel: true,
                        width: '36%'
                    }
                ],
                xAxis: [
                    {
                        type: 'value',
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        position: 'top',
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    {
                        gridIndex: 1,
                        show: false
                    },
                    {
                        gridIndex: 2,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        position: 'top',
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        inverse: true,
                        position: 'right',
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: lineColor
                            }
                        },

                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        data: xData
                    },
                    {
                        gridIndex: 1,
                        type: 'category',
                        inverse: true,
                        position: 'left',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#ffffff',
                                fontSize: 16
                            },
                            align: 'center'
                        },
                        data: xData.map(function(value) {
                            return {
                                value: value,
                                textStyle: {
                                    align: 'center',
                                    padding: [0, 0, 0, 20]
                                }
                            }
                        })
                    },
                    {
                        gridIndex: 2,
                        type: 'category',
                        inverse: true,
                        position: 'left',
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: lineColor
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        data: xData
                    }
                ],
                series: []
            },
            options: []
        }
        rubbishOption.baseOption.timeline.data.push(timeLineData[0])

        const rubbishOption1 = JSON.parse(JSON.stringify(rubbishOption))
        const rubbishOption2 = JSON.parse(JSON.stringify(rubbishOption))
        rubbishOption1.baseOption.legend.data = rubbishOption1.baseOption.legend.data.concat(
            legend1
        )
        rubbishOption2.baseOption.legend.data = rubbishOption2.baseOption.legend.data.concat(
            legend2
        )

        rubbishOption1.options.push({
            series: [
                {
                    name: '不可回收垃圾',
                    type: 'bar',
                    barWidth: 30,
                    stack: '1',
                    itemStyle: {
                        normal: {
                            borderRadius: 6,
                            color: {
                                x: 1,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {offset: 1, color: colors[0].start},
                                    {offset: 0, color: colors[0].end}
                                ]
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'left',
                            offset: [40, 0],
                            textStyle: {
                                color: '#fff',
                                fontSize: 14
                            },
                            formatter: function(data) {
                                let str = ''
                                str = data.data + '吨'
                                return str
                            }
                        }
                    },
                    data: UnRecyclableData,
                    animationEasing: 'elasticOut'
                },
                {
                    name: '可回收垃圾',
                    type: 'bar',
                    stack: '2',
                    barWidth: 30,
                    xAxisIndex: 2,
                    yAxisIndex: 2,
                    itemStyle: {
                        normal: {
                            color: {
                                x: 1,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: colors[1].start},
                                    {offset: 1, color: colors[1].end}
                                ]
                            },
                            borderRadius: 6
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            offset: [-40, 0],
                            textStyle: {
                                color: '#fff',
                                fontSize: 14
                            },
                            formatter: function(data) {
                                let str = ''
                                str = data.data + '吨'
                                return str
                            }
                        }
                    },
                    data: RecyclableData,
                    animationEasing: 'elasticOut'
                }
            ]
        })
        rubbishOption2.options.push({
            series: [
                {
                    name: '有害垃圾',
                    type: 'bar',
                    barWidth: 30,
                    stack: '1',
                    itemStyle: {
                        normal: {
                            color: {
                                x: 1,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {offset: 1, color: colors1[0].start},
                                    {offset: 0, color: colors1[0].end}
                                ]
                            },
                            borderRadius: 6
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'left',
                            offset: [40, 0],
                            textStyle: {
                                color: '#fff',
                                fontSize: 14
                            },
                            formatter: function(data) {
                                let str = ''
                                str = data.data + '吨'
                                return str
                            }
                        }
                    },
                    data: HarmfulData,
                    animationEasing: 'elasticOut'
                },
                {
                    name: '其他垃圾',
                    type: 'bar',
                    stack: '2',
                    barWidth: 30,
                    xAxisIndex: 2,
                    yAxisIndex: 2,
                    itemStyle: {
                        normal: {
                            color: {
                                x: 1,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: colors1[1].start},
                                    {offset: 1, color: colors1[1].end}
                                ]
                            },
                            borderRadius: 6
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            offset: [-40, 0],
                            textStyle: {
                                color: '#fff',
                                fontSize: 14
                            },
                            formatter: function(data) {
                                let str = ''
                                str = data.data + '吨'
                                return str
                            }
                        }
                    },
                    data: OtherData,
                    animationEasing: 'elasticOut'
                }
            ]
        })
        rubbishChartBox1.setOption(rubbishOption1, true)
        rubbishChartBox2.setOption(rubbishOption2, true)
    }
}
</script>

<style lang="less" scoped>
.chart-line-box {
    .line {
        width: 401px;
        height: 4px;
        background: url('../assets/images/chart-line-bg.png');
        margin: 0 auto;
        margin-top: 20px;
    }
}
</style>
